<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title>Document</title>
		<script src="/assets/libs/jquery/dist/jquery.min.js"></script>
		<script src="/assets/libs/echarts.min.js"></script>
		<!-- <script  src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script> -->
		<script src="https://www.amaoee.cn/assets/js/vue.min.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
		<style>
			body {
				background-color: #FFFFFF;
			}

			.content-wrap {
				background-color: #FFFFFF;
				border-radius: 4px;
				padding: 15px;
			}

			.item-second {

				width: 100%;
			}

			.second-box {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				height: 35px;

				margin-left: 10px;
				display: flex;
				/* padding-bottom: 20px; */
			}

			.second-border {
				margin-top: 30px;
				height: 100%;
				background-color: #FFFFFF;
				/* background-color: #000088; */
				width: 10%;
				display: flex;
				flex-wrap: wrap;
				margin-left: 20px;

				/* margin-top: 15px */
				/* 
				margin-top: 15px;
				margin-left: 10px; */


			}

			.second-box .second-item {
				width: 150px;
				/* height: 40px; */
				/* margin-top: 10px; */
				/* padding: 8px 10px; */
				display: inline-block;
				cursor: pointer;
				border: 1px solid #EEEEEE;
				border-radius: 4px;
				padding: 5px;
				text-align: center;

			}

			.second-box .second-item.active {
				color: #18bc9c;
			}

			.third-box {
				margin-top: 15px;
				margin-left: 10px;
			}

			.third-border {
				display: inline-block;
				border: 1px solid #EEEEEE;
				border-radius: 4px;
			}

			.third-box .third-item {
				padding: 8px 10px;
				display: inline-block;
				cursor: pointer;

			}

			.third-box .third-item.active {
				color: #18bc9c;
			}

			.third-txt {
				float: right;
				cursor: pointer;
				border-radius: 4px;
				padding: 6px 10px;
				display: inline-block;
				margin-right: 48px;
				margin-top: 10px;
				/* margin-top: -20px; */
				border: 1px solid #18bc9c;
				background-color: #18bc9c;
				color: #FFFFFF;
			}

			.first-box {}

			.first-item {
				cursor: pointer;
				border-radius: 4px;
				padding: 6px 10px;
				display: inline-block;
				margin: 10px 10px 0 10px;
				border: 1px solid #EEEEEE;
				background-color: #FFFFFF;
				color: #333;
			}

			.first-box .second-item {
				float: right;
				cursor: pointer;
				border-radius: 4px;
				padding: 6px 10px;
				display: inline-block;
				margin: 10px 0px 0 10px;
				border: 1px solid #18bc9c;
				background-color: #18bc9c;
				color: #FFFFFF;
			}

			.first-item.active {
				border: 1px solid #18bc9c;
				background-color: #18bc9c;
				color: #FFFFFF;
			}

			.item-top {
				display: flex;
			}

			.item-info {
				font-size: 18px;
				margin: 15px 0 0 30px;
			}

			.item-info:first-child {
				margin-left: 10px;
			}

			.item-bg {
				width: 95%;
				margin: 100px auto;
				overflow-x: auto;
			}

			table {
				width: 95%;
				margin: 50px auto;
				text-align: center;
			}

			th,
			td {
				text-align: center;
				height: 50px;

			}

			.item-check {
				width: 20px;
				height: 20px;
				border-radius: 5px;
				background-color: #BBBBBB;
				margin: 0 auto;
			}

			.item-title {
				position: fixed;
				width: 150px;
				height: 50px;
				background-color: rgba(0, 0, 0, 0.8);
				top: 50%;
				left: 50%;
				text-align: center;
				line-height: 50px;
				color: #FFFFFF;
				transform: translate(-50%, -50%);
			}

			.item-input {
				position: fixed;
				width: 200px;
				height: 100px;
				background-color: rgba(0, 0, 0, 0.6);
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				color: #FFFFFF;
			}

			.item-word {
				position: fixed;
				width: 50%;
				height: 80%;
				left: 50%;
				top: 50%;
				background-color: #FFFFFF;
				border: #000000 1px solid;
				transform: translate(-50%, -50%);
				z-index: 111;
				min-width: 900px;
			}

			.item-text {
				font-size: 15px;
				padding: 10px;
				border: 1px solid #000000;
				width: 200px;
				height: 200px;
				text-align: center;
				overflow-x: auto;
				display: none;
			}

			.item-area {
				width: 300%;
				height: 400px;
				/* margin-right: 20px; */
				margin-top: 20px;
				border: 1rpx solid;
				margin-left: 30px;
			}
		</style>

	</head>
	<body>
		<div class="content-wrap" id="app">
			<div class="item-box">
				<div class="item-left" style="cursor: pointer;font-size:16px;">
					<button
						onclick="location.href='{$url}/TyQEOGLsfv.php/user/user/health/ids/{$user_info.id}'">返回</button>
				</div>
				<div class="item-top">
					<div class="item-info">
						客户编号：{$user_info.id}
					</div>
					<div class="item-info">
						用户名：{$user_info.nickname}
					</div>
					<div class="item-info">
						手机号：{$user_info.mobile}
					</div>
					<div class="item-info">
						性别：{$user_info.gender}
					</div>
				</div>
			</div>
			<div class="first-box" v-if="dataList.length>0">

				<span class="second-item" style="margin-right: 300px;" @click="goout()">导出</span>
				<!-- <el-button :plain="true" @click="open"></el-button> -->
				<!--  -->
			</div>
			<div class="first-box">
				<div class="first-item" :class="{active:title_current.indexOf(index)!=-1}"
					v-for="(item,index) in title_List" @click="getTitle(item.id,index,item.attr_value)">
					<span>{{item.attr_value}}</span>
				</div>
			</div>
			<div class="second-box">
				<div class="second-border" v-for="(item,index) in infoList" @click="getInfo(item.id,index)">
					<span class="second-item" :class="{active:info_current.indexOf(index)!=-1}">{{item.name}}</span>
				</div>
			</div>


			<div class="item-bg" v-if="dataList.length>0">
				<table border="" cellspacing="" cellpadding="">
					<tr>
						<th style="min-width: 150px;"></th>
						<th style="min-width: 150px;" v-for="(item,index) in title_value">{{item}}</th>
					</tr>
					<tr v-for="(item,index) in dataList">
						<td>
							{{item.file}}
						</td>
						<td v-for="(items,indexs) in item.list">{{items.attr_value}}</td>
					</tr>

				</table>
			</div>
			<div id="" v-if="dataList.length>0">
				<div class="" style="padding: 30px;">
					<el-radio v-model="radio" label="1">折线图</el-radio>
					<el-radio v-model="radio" label="2">柱状图</el-radio>
				</div>
				<input type="button" style="margin-left: 50px;width: 100rpx;height: 30px;" value="生成图表"
					@click="goImg()">
			</div>
			<div id="item-pic" style="width:510px;height: 400px;display:none;">
			</div>
			<div class="item-word" v-if="imgShow==true">
				<div class="" style="display: flex;">
					<div class="word" style="margin: 0 auto;display: flex;">
						<div class="" style="" v-for="(item,index) in imgData" :key="index">
							<img width="510" height="400" style="margin:50px 0 50px 20px" :src="item">
						</div>
					</div>

				</div>


				<input type="button" style="margin-left: 50px;width: 100rpx;height: 30px;" value="导出word"
					@click="goWord()">
				<input type="button" style="margin-left: 50px;width: 100rpx;height: 30px;" value="关闭"
					@click="getFalse()">
			</div>

		</div>
		<script type="text/javascript" src="/assets/libs/jquery/dist/FileSaver.js"></script>
		<script type="text/javascript" src="/assets/libs/jquery/dist/jquery.wordexport.js"></script>
		<script>
			var app = new Vue({
				el: '#app',
				data: {
					info: '',
					infoList: [],
					info_current: [],
					title_List: [],
					title_current: [],
					title_id: [],
					title_value: [],
					info_id: [],
					info_ids: '',
					title_ids: '',
					List: [],
					fileList: [],
					dataList: [],
					admin_id: "{$admin_id}",
					user_id: "{$user_info.id}",
					item_kind: [],
					export_name: '',
					option: '',
					xData: [],
					yData: [],
					imgData: [],
					textarea: '',
					imgShow: false,
					titleData: [],
					titleName: '',
					typeLine: 'line',
					radio: '1',
				},
				created() {
					this.init();
				},
				mounted() {},
				methods: {
					getFalse() {
						this.imgShow = false
					},
					goWord() {
						$(".word").wordExport('生成word文档');
					},
					getTExt() {
						console.log(this.textarea)
					},
					goImg() {
						if (this.radio == 1) {
							this.yData.forEach((item) => {
								item.type = 'line'
							})
						
						} else {
							this.yData.forEach((item) => {
								item.type = 'bar'
							})
						}
						this.imgData = []
						console.log(this.title_value)
						console.log(this.titleData)
						console.log(this.yData)
						var chartDom = document.getElementById('item-pic');
						var myChart = echarts.init(chartDom);
						var option = {
							animation: false,
							grid: { // 控制图的大小，调整下面这些值就可以，
								x: 50, //控制x轴文字与底部的距离
								y2: 200 // y2可以控制倾斜的文字狱最右边的距离，放置倾斜的文字超过显示区域
							},
							title: {
								text: this.titleName
							},
							legend: {
								data: this.titleData
							},
							xAxis: {
								type: 'category',
								axisLabel: {
									interval: 0, //强制文字产生间隔
									rotate: 45, //文字逆时针旋转45°
									textStyle: { //文字样式
										color: "black",
										fontSize: 14,
										fontFamily: 'Microsoft YaHei'
									}
								},
								data: this.title_value
							},
							yAxis: {
								type: 'value'
							},
							series: this.yData
						};
						console.log(option)
						option && myChart.setOption(option);

						let imgSrc = myChart.getDataURL({
							type: 'jpeg', //png | jpeg
							pixelRatio: 1,
							backgroundColor: '#fff' //背景色白色
						});
						// console.log(imgSrc)
						this.imgData.push(imgSrc)
						this.imgShow = true
					},
					goout() {
						if (this.dataList.length == 0 || this.title_value.length == 0) {
							this.$message({
								message: '导出数据有误',
								type: 'warning',
								duration: 1000
							});
						} else {
							console.log(this.dataList)
							// console.log(this.title_value)
							// console.log(this.user_id)
							// console.log(this.admin_id)
							// console.log(this.info_ids)
							this.open1()

						}

					},
					open() {
						this.$message({
							message: '导出成功',
							type: 'success',
							duration: 1000
						});
					},
					open1() {
						this.$prompt('请输入文件名', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
						}).then(({
							value
						}) => {
							if (value == null) {
								this.$message({
									type: 'success',
									message: '文件名不能为空 '
								});
								return
							}
							this.export_name = value
							this.$message({
								type: 'success',
								message: '文件名是: ' + value,
							});
							$.ajax({
								type: 'POST',
								url: "{$url}/index.php/api/health_classify/exportDToUser",
								data: {
									user_id: this.user_id,
									admin_id: this.admin_id,
									kind: this.dataList,
									item: this.title_value,
									topic_id: this.info_ids,
									name: this.export_name
								},
								dataType: 'json',
								success: (res) => {
									this.open('导出成功')
								}
							})
						}).catch(() => {
							this.$message({
								type: 'info',
								message: '取消输入'
							});
						});

					},
					getExport(item) {
						console.log(item)
						if (this.item_kind.indexOf(item) == -1) {
							this.item_kind.push(item);
						} else {
							const num = this.item_kind.indexOf(item);
							this.item_kind.splice(num, 1);
						}
						console.log(this.dataList)
						console.log(this.title_value)
						console.log(JSON.stringify(this.item_kind))

					},
					init() {
						this.info = JSON.parse(sessionStorage.getItem('info'))
						console.log(this.info)

						$.ajax({
							type: 'POST',
							url: "{$url}/index.php/api/health_classify/fileList",
							data: {
								class_id: this.info.classid,
								user_id: this.info.user_id
							},
							dataType: 'json',
							success: (res) => {
								if (res.code == 1) {
									console.log(res)
									this.infoList = res.data
									for (let item in res.data.sheet_list) {
										if (this.info.sheetid == res.data.sheet_list[item].sheet) {
											this.titleName = res.data.sheet_list[item].sheet
										}

									}
									console.log(this.titleName)
								}
							}
						})
						$.ajax({
							type: 'POST',
							url: "{$url}/index.php/api/health_classify/itemList",
							data: {
								topic_id: this.info.topic_id,
								sheet: this.info.sheetid,
								user_id: this.info.user_id
							},
							dataType: 'json',
							success: (res) => {
								if (res.code == 1) {
									console.log(res)
									this.title_List = res.data
								}
							}
						})
					},
					getTitle(id, index, value) {
						console.log(id)
						console.log(value)
						console.log(index)
						if (this.title_current.indexOf(index) == -1) {
							this.title_current.push(index);
						} else {
							const num = this.title_current.indexOf(index);
							this.title_current.splice(num, 1);
						}
						if (this.title_id.indexOf(id) == -1) {
							this.title_id.push(id);
							this.title_value.push(value);

						} else {
							const num1 = this.title_id.indexOf(id);
							const num2 = this.title_value.indexOf(value);
							this.title_id.splice(num1, 1);
							this.title_value.splice(num2, 1);
						}
						// if (this.title_value.indexOf(value) == -1) {
						// 	this.title_value.push(value);
						// } else {
						// 	const num2 = this.title_value.indexOf(value);
						// 	this.title_value.splice(num2, 1);
						// }
						this.title_ids = ''
						this.title_id.forEach((item, index) => {
							if (index != 0) {
								item = ',' + item;
							}
							this.title_ids += item;
						})
						console.log("gettitle")
						// console.log(this.title_ids)
						// console.log(this.title_value)
						console.log(JSON.stringify(this.title_value))
						this.getAll()
					},
					getInfo(id, index) {
						if (this.info_current.indexOf(index) == -1) {
							this.info_current.push(index);
						} else {
							const num = this.info_current.indexOf(index);
							this.info_current.splice(num, 1);
						}
						if (this.info_id.indexOf(id) == -1) {
							this.info_id.push(id);
						} else {
							const num1 = this.info_id.indexOf(id);
							this.info_id.splice(num1, 1);
						}
						this.info_ids = ''
						this.info_id.forEach((item, index) => {
							if (index != 0) {
								item = ',' + item;
							}
							this.info_ids += item;
						})
						console.log("gettinfo")
						console.log(this.info_ids)
						this.getAll()
					},
					getAll() {
						console.log("getall")
						console.log(this.title_ids)
						console.log(this.info_ids)
						this.titleData = []
						if (this.title_ids != '' && this.info_ids != '') {
							$.ajax({
								type: 'POST',
								url: "{$url}/index.php/api/health_classify/healthDetail",
								data: {
									topic: this.info_ids,
									kind: this.title_ids
								},
								dataType: 'json',
								success: (res) => {
									if (res.code == 1) {
										console.log("bbb")
										this.fileList = []
										this.List = []
										this.dataList = res.data
										console.log(this.title_value)
										console.log(this.dataList)
										var data = []
										var dataa = []
										this.dataList.forEach((item, index) => {
											this.titleData.push(item.file)
											//console.log(item)
											dataa[index] = {
												"name": item.file,
												"data": [],
												'type': this.typeLine
											}
											var datan = [];
											for (let items in item.list) {
												if (isNaN(parseInt(item.list[items].attr_value))) {
													ynum = 0
													datan.push(ynum)
												} else {
													datan.push(parseInt(item.list[items].attr_value))
												}
												dataa[index].data = datan
											}

											this.yData = dataa
											console.log("aaaa")
											console.log(this.yData);
											console.log(this.titleData)
										})

										res.data.forEach(item => {
											this.fileList.push(item.file)
											this.List.push(item.list)
										})

									}
								}
							})
						} else {
							this.dataList = []

						}

					},
				}
			})
		</script>
	</body>
</html>
